<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生选课系统 - 设置</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../css/accountsettings.css">
</head>
<body class="bg-gray-50 font-sans">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <i class="fa-solid fa-graduation-cap text-blue-600 text-2xl"></i>
        <h1 class="text-xl font-bold text-gray-800">学生选课系统</h1>
      </div>
      
      <nav class="hidden md:flex items-center space-x-6">
        <a href="../html/home.html" class="text-gray-600 font-medium hover:text-blue-800 transition-colors">首页</a>
        <a href="../html/selectcoursecenter.html" class="text-gray-600 font-medium hover:text-blue-800 transition-colors">选课</a>
        <a href="../html/coursetable.html" class="text-gray-600 font-medium hover:text-blue-800 transition-colors">课程表</a>
        <a href="../html/gradesselect.html" class="text-gray-600 font-medium hover:text-blue-800 transition-colors">成绩查询</a>
      </nav>
      
      <div class="flex items-center space-x-4">
        <div class="relative">
          <button class="flex items-center space-x-2 focus:outline-none" id="userMenuBtn">
            <img src="../images/courseimages/user.jpg" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-blue-500">
            <span class="hidden md:inline-block text-gray-700 font-medium">张三</span>
            <i class="fa-solid fa-angle-down text-gray-500"></i>
          </button>
          
          <!-- 用户下拉菜单 -->
          <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden z-50" id="userMenu">
            <a href="../html/personalcenter.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
              <i class="fa-solid fa-user mr-2"></i>个人中心
            </a>
            <a href="../html/accountsetting.html" class="block px-4 py-2 text-sm text-blue-600 hover:bg-gray-100">
              <i class="fa-solid fa-cog mr-2"></i>账号设置
            </a>
            <div class="border-t border-gray-100 my-1"></div>
            <a href="../html/login.html" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
              <i class="fa-solid fa-sign-out-alt mr-2"></i>退出登录
            </a>
          </div>
        </div>
        
        <button class="md:hidden focus:outline-none" id="mobileMenuBtn">
          <i class="fa-solid fa-bars text-gray-700 text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="md:hidden bg-white border-t border-gray-100 hidden" id="mobileMenu">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <a href="../html/home.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">首页</a>
        <a href="../html/selectcoursecenter.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">选课</a>
        <a href="../html/coursetable.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">课程表</a>
        <a href="../html/gradesselect.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">成绩查询</a>
        <a href="../html/accountsetting.html" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600 bg-blue-50">账号设置</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container mx-auto pt-24 pb-12 px-4 md:px-6">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <!-- 侧边栏 -->
      <aside class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-md overflow-hidden sticky top-24">
          <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-4">
            <div class="flex items-center space-x-4">
              <img src="../images/courseimages/user.jpg" alt="用户头像" class="w-16 h-16 rounded-full object-cover border-4 border-white shadow-lg">
              <div>
                <h2 class="text-white font-bold text-xl">张三</h2>
                <p class="text-blue-100 text-sm">计算机科学与技术学院</p>
                <p class="text-blue-100 text-sm">学号: 20230001</p>
              </div>
            </div>
          </div>
          
          <nav class="p-4">
            <ul class="space-y-1">
              <li>
                <a href="#" class="flex items-center p-3 text-blue-600 bg-blue-50 rounded-lg font-medium">
                  <i class="fa-solid fa-user-circle w-6"></i>
                  <span>个人信息</span>
                </a>
              </li>
              <li>
                <a href="../html/register.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                  <i class="fa-solid fa-lock w-6"></i>
                  <span>密码设置</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                  <i class="fa-solid fa-bell w-6"></i>
                  <span>通知设置</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                  <i class="fa-solid fa-shield-alt w-6"></i>
                  <span>隐私设置</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                  <i class="fa-solid fa-question-circle w-6"></i>
                  <span>帮助与反馈</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                  <i class="fa-solid fa-info-circle w-6"></i>
                  <span>关于系统</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </aside>
      
      <!-- 主内容 -->
      <div class="lg:col-span-3 space-y-6">
        <!-- 设置卡片 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
          <div class="p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">个人信息</h2>
            
            <form id="profileForm">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                  <input type="text" id="username" name="username" value="张三" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                
                <div>
                  <label for="studentId" class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                  <input type="text" id="studentId" name="studentId" value="20230001" disabled class="w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-lg focus:outline-none">
                </div>
                
                <div>
                  <label for="college" class="block text-sm font-medium text-gray-700 mb-1">学院</label>
                  <select id="college" name="college" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="computer">计算机科学与技术学院</option>
                    <option value="math">数学学院</option>
                    <option value="physics">物理学院</option>
                    <option value="english">外国语学院</option>
                    <option value="chemistry">化学学院</option>
                  </select>
                </div>
                
                <div>
                  <label for="major" class="block text-sm font-medium text-gray-700 mb-1">专业</label>
                  <select id="major" name="major" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="cs">计算机科学与技术</option>
                    <option value="se">软件工程</option>
                    <option value="ai">人工智能</option>
                    <option value="network">网络工程</option>
                    <option value="bigdata">大数据技术</option>
                  </select>
                </div>
                
                <div>
                  <label for="grade" class="block text-sm font-medium text-gray-700 mb-1">年级</label>
                  <select id="grade" name="grade" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="freshman">大一</option>
                    <option value="sophomore">大二</option>
                    <option value="junior">大三</option>
                    <option value="senior">大四</option>
                    <option value="graduate">研究生</option>
                  </select>
                </div>
                
                <div>
                  <label for="class" class="block text-sm font-medium text-gray-700 mb-1">班级</label>
                  <input type="text" id="class" name="class" value="计科2301" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                
                <div>
                  <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                  <input type="email" id="email" name="email" value="zhangsan@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                
                <div>
                  <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                  <input type="tel" id="phone" name="phone" value="13800138000" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
              </div>
              
              <div class="mt-6">
                <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                <textarea id="bio" name="bio" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">热爱学习计算机科学，对数据结构和算法有浓厚兴趣。</textarea>
              </div>
              
              <div class="mt-6 flex justify-end">
                <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors mr-3" id="cancelProfileBtn">
                  取消
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                  保存更改
                </button>
              </div>
            </form>
          </div>
        </div>
        
        <!-- 密码设置卡片 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
          <div class="p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">密码设置</h2>
            
            <form id="passwordForm">
              <div class="space-y-4">
                <div>
                  <label for="currentPassword" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
                  <input type="password" id="currentPassword" name="currentPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                
                <div>
                  <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                  <input type="password" id="newPassword" name="newPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                  <p class="mt-1 text-xs text-gray-500">密码长度至少8位，包含字母、数字和特殊字符</p>
                </div>
                
                <div>
                  <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                  <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
              </div>
              
              <div class="mt-6 flex justify-end">
                <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors mr-3" id="cancelPasswordBtn">
                  取消
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                  修改密码
                </button>
              </div>
            </form>
          </div>
        </div>
        
        <!-- 通知设置卡片 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
          <div class="p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">通知设置</h2>
            
            <div class="space-y-4">
              <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                <div>
                  <h3 class="font-medium text-gray-900">课程提醒</h3>
                  <p class="text-sm text-gray-500">接收课程开始前的提醒通知</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" value="" class="sr-only peer" checked>
                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
              </div>
              
              <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                <div>
                  <h3 class="font-medium text-gray-900">选课通知</h3>
                  <p class="text-sm text-gray-500">接收选课开放、截止等相关通知</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" value="" class="sr-only peer" checked>
                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
              </div>
              
              <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                <div>
                  <h3 class="font-medium text-gray-900">成绩通知</h3>
                  <p class="text-sm text-gray-500">接收成绩发布的相关通知</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" value="" class="sr-only peer" checked>
                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
              </div>
              
              <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                <div>
                  <h3 class="font-medium text-gray-900">系统通知</h3>
                  <p class="text-sm text-gray-500">接收系统公告、维护等相关通知</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" value="" class="sr-only peer" checked>
                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white py-12">
    <div class="container mx-auto px-4 md:px-6">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-lg font-bold mb-4">学生选课系统</h3>
          <p class="text-gray-400 text-sm">为学生提供便捷的选课服务和个人信息管理</p>
        </div>
        
        <div>
          <h3 class="text-lg font-bold mb-4">快速链接</h3>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">选课中心</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">课程表</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">成绩查询</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-bold mb-4">帮助支持</h3>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">意见反馈</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-bold mb-4">联系我们</h3>
          <ul class="space-y-2 text-sm">
            <li class="flex items-center text-gray-400">
              <i class="fa-solid fa-envelope mr-2"></i>
              <span>support@example.com</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa-solid fa-phone mr-2"></i>
              <span>010-12345678</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa-solid fa-map-marker-alt mr-2"></i>
              <span>博雅甲512</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
        <p>© 2023 学生选课系统 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 保存成功提示 -->
  <div class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg transform transition-all duration-300 opacity-0 translate-y-4" id="saveSuccessToast">
    <div class="flex items-center">
      <i class="fa-solid fa-check-circle mr-2"></i>
      <span>保存成功</span>
    </div>
  </div>

  <script src="settings.js"></script>
</body>
</html>
    